<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { request } from '@/request/request'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const currentLang = ref(uni.getStorageSync('language') || 'zh')

// 计算当前是否是维吾尔语
const isUyghur = computed(() => currentLang.value === 'ug')

// 获取字体缩放比例
const fontScale = computed(() => {
  return uni.getStorageSync('fontScale') || 1
})

// 计算字体样式
const fontStyle = computed(() => {
  return {
    fontSize: `${28 * fontScale.value}rpx`
  }
})

// 协议内容
const agreement = ref({
  content: '',
  content_uy: '',
  title: '',
  title_uy: ''
})

// 计算显示的内容
const displayContent = computed(() => {
  return isUyghur.value ? (agreement.value.content_uy || '') : agreement.value.content
})

// 计算显示的标题
const displayTitle = computed(() => {
  return isUyghur.value ? (agreement.value.title_uy || t('agreement.title')) : (agreement.value.title || t('agreement.title'))
})

onShow(() => {
  request.get(`index/agreement?types=service`).then(res => {
    if (res.code === 200 && res.data) {
      console.log(res);

      agreement.value = res.data
    }
  })
})

const backClick = () => {
  uni.navigateBack()
}
</script>

<template>
  <tn-navbar backgroundColor="#fff" fixed>{{ t('agreement.title') }}
    <template #back>
      <tn-icon name="left" size="40" @click="backClick"></tn-icon>
    </template>
  </tn-navbar>

  <view class="agreement-page" :class="{ 'rtl': isUyghur }">
    <view class="agreement-content" :style="fontStyle">
      <rich-text :nodes="displayContent"></rich-text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.agreement-page {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx;

  &.rtl {
    direction: rtl;
  }

  .agreement-content {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    color: #333;
    line-height: 1.6;
  }
}
</style>